<template>
  <div class="panel w-full h-full">
    <div class="angle"></div>
    <slot></slot>
    <div class="angle"></div>
  </div>
</template>

<script>
export default defineComponent({
  name: 'Panel'
});
</script>

<style lang="scss" scoped>
.panel {
  overflow-y: scroll;
  position: relative;
  background-color: rgba(255, 255, 255, 0.1);

  &::-webkit-scrollbar {
    display: none;
  }

  .angle {
    left: 0;
    width: 100%;
    display: flex;
    height: 0.625rem;
    position: absolute;
    justify-content: space-between;

    &::before,
    &::after {
      content: '';
      display: block;
      width: 0.625rem;
      height: 0.625rem;
    }
  }

  .angle:first-child {
    top: 0;

    &::before {
      border-top: 0.0625rem solid #14ffec;
      border-left: 0.0625rem solid #14ffec;
    }

    &::after {
      border-top: 0.0625rem solid #14ffec;
      border-right: 0.0625rem solid #14ffec;
    }
  }

  .angle:last-child {
    bottom: 0;

    &::before {
      border-left: 0.0625rem solid #14ffec;
      border-bottom: 0.0625rem solid #14ffec;
    }

    &::after {
      border-right: 0.0625rem solid #14ffec;
      border-bottom: 0.0625rem solid #14ffec;
    }
  }
}
</style>
